<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>选择支付方式</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    
<style type="text/css">
  	/*css 的样式都放在这里*/
  	/*画面背景色*/
  	/*下划线颜色*//*#EFEFF4*/
  	/*按钮颜色*//*#02CAAD*/
  	/*未选中颜色*//*gainsboro*/
  	/*选中颜色*//*#FF6A49*/
  	
  	#content{
  		width: 100%;
  		height: 100%;
  		/*color: gainsboro;*/
  	}
  	#money{
  		background-color: white;
  	}
  	#money_layout{
  		width: 94%;
  		margin-left: 3%;
  	}
  	/*下划线*/
  	#need_pay,#balance,#alipay{
  		border-bottom: solid 1px #EFEFF4;
  	}
  	/*边距*/
  	#need_pay{
  		padding-top: 0.5rem;
  		padding-bottom: 0.5rem;
  		display: flex;
  		justify-content: space-between;
  	}
  	#balance,#alipay,#wechat{
  		padding-top: 0.5rem;
  		padding-bottom: 0.5rem;
  		background-repeat: no-repeat;
  		padding-left: 2rem;
  		display: flex;
  		justify-content: space-between;
  	}
  	#balance{
  		background-image: url(http://47.104.254.28/commonfile/img/img/img_pay_account.png);
  		background-size: 1.5rem 1.5rem;
  		background-position: 0rem 50%;
  	}
  	#alipay{
  		background-image: url(http://47.104.254.28/commonfile/img/img/img_pay_apliy.png);
  		background-size: 1.6rem 1.6rem;
  		background-position: -0.1rem 50%;
  	}
  	#wechat{
  		background-image: url(http://47.104.254.28/commonfile/img/img/img_pay_wechart.png) ;
  		background-size: 2.4rem 1.4rem;
  		background-position: -0.5rem 50%;
  	}
  	#pay{
  		text-align: center;
  		padding-top:0.7rem ;
  	}
  	#pay_layout{
  		background-color: #55E9D0;
  		color: white;
		width: 60%;
		border-radius: 8px;
		margin: 0 auto;
  	}
    #pay_layout div {
        padding-bottom: 0.5rem;
		padding-top: 0.5rem;
    }
  	#balance_first,#alipay_first,#wechat_first{
  		/*border: solid 1px blue;*/
  		display:inline-block;
  	}
  	#balance_second,#alipay_second,#wechat_second{
  		/*border: solid 1px blue;*/
  		width: 30px;
  		height: 30px;
  		border-radius: 50%;
  		background-color: gainsboro;
  	}
  	#money_value{
  		color: #FF6A49;
  	}
</style>


</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <!-- html代码内容区域 -->
        <div id="content">      	
	 		<div id="money">
	 			<div id="money_layout">
		 			<div id="need_pay">
		 				<span id="">
		 					共需支付
		 				</span>
		 				<span id="money_value">
		 					￥0.0元
		 				</span>
		 			</div>
		 			<!-- <div id="balance" onclick="xuanzhong_on(this)">
		 				<div id="balance_first">
		 					账户余额支付
		 				</div>
		 				<div id="balance_second" class="on_change">
		 				</div>
		 			</div> -->
		 			<div id="alipay" onclick="xuanzhong_on(this)">
		 				<div id="alipay_first">
		 					支付宝支付
		 				</div>
		 				<div id="alipay_second" class="on_change"> 
		 				</div>
		 			</div>
		 			<!-- <div id="wechat" onclick="xuanzhong_on(this)">
		 				<div id="wechat_first">
		 					微信支付
		 				</div>
		 				<div id="wechat_second" class="on_change"></div>
		 			</div> -->
	 			</div>
	 			
	 		</div>
	 		<div id="pay">
	 			<div id="pay_layout">
		 			<div id="pay_click" onclick="payment()">
		 				立即支付
                     </div>
	 			</div>
	 		</div>
        </div>

    </div>
</div>






<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js' charset='utf-8'></script>


<script type="text/javascript">
            // 函数区域，函数放在“初始化区域的上面”
            var pay_type = "alipay";
            var amount = 0;
            var orderno = "";

            function xuanzhong_on(onthis){

            var xuanzhong_id = $$(onthis).attr("id");
            //        console.log(xuanzhong_id);
            var beixuanzhong = "#"+xuanzhong_id+" .on_change";
            $$(".on_change").css("background-color","gainsboro");
            $$(beixuanzhong).css("background-color","#FF6A49");
            pay_type = xuanzhong_id;
            }


            //点击去支付
            function payment(){
            if(isNotNull(pay_type)){

            //console.log(pay_type);
            //native_goto('local/pay_submit?amount='+amount+'&pay_type='+pay_type);


            var params={};

            net_request('get','apis/payOrder?paytype='+pay_type+'&amount='+amount+'&userid='+curuserid,params,orderCallBack,errorCallBack);

            }
            }


            //    成功的回调函数
            function orderCallBack(data){
            if(isNotNull(data)){
            orderno = data.orderno;
            var params = {};
            if(pay_type == 'alipay'){//网页支付


            var url = BASE_NET_URL+'apis/alipay?paytype='+pay_type+'&amount='+amount+'&userid='+curuserid+'&orderno='+orderno;
            //native_goto('local/webview?url='+url);


            var param = {
            type:'buybook',
            paytype:pay_type,
            orderno:orderno,
            bookdata:window.btoa(url)
            };

            send_data(param);

            }else{
            net_request('get_text','apis/alipay?paytype='+pay_type+'&amount='+amount+'&userid='+curuserid+'&orderno='+orderno,params,successCallBack,errorCallBack);

            }


            }
            }


            function payState(data){

            if(isNotNull(data)){
            var params={};
            net_request('get','apis/payState?orderno='+data,params,orderStateCallBack,errorCallBack);
            }

            }




            function orderStateCallBack(data){

            if(isNotNull(data) && data.state == 1){//支付成功
            //alert("充值成功");
            //native_showdialog("充值成功");
            $.alert("充值成功");
            }
            }






            //    成功的回调函数
            function success2CallBack(data){

            if(isNotNull(data)){
            const div=document.createElement('divform');
            div.innerHTML=data; // data就是接口返回的form 表单字符串
            document.body.appendChild(div);
            document.forms[0].submit();
            }
            }

            //    成功的回调函数
            function successCallBack(data){

            if(isNotNull(data)){

            //if(data.success==true){
            var str = data.data;
            var param = {
            type:'buybook',
            orderno:orderno,
            paytype:pay_type,
            bookdata:window.btoa(data)
            };
            //开始请求购买图书
            send_data(param);
            //}
            }
            }
            //  失败的回调函数
            function errorCallBack(data){

            console.log(data);
            }



            //一般app 初始化 html 传参数，函数名固定
            function getParams(data){
            //$$("#money_value").html(data);
            // data需要转成json调用 ，函数urlParamParseJson();
            var jsonData = urlParamParseJson(data);
            amount = jsonData.amount;
            $$("#money_value").html("￥"+jsonData.amount+"元");
            //jsonData.id
            //jsonData.loginid
            //var params = {
            //callbacktype:'jiaojuan_submit'
            //}
            //网络请求框架，需要传入成功函数回调和 失败函数回调
            //net_request('post','api/v1/banner',params,successCallBack,errorCallBack);
            //net_request('post','api/v1/list',params,successCallBack,errorCallBack);
            }


            // 初始化区域
            $$(function () {


            // $$("#balance").hide();

            $$("#alipay_second").css("background-color","#FF6A49");

            $.init();
            });


            </script>
</body>
</html>